import React, { Component } from "react";
import "./SetAvatar.scss";
import { uploadLogo } from "../../data/set";
import store from "../../store";
import { connect } from "react-redux";
import { getUserInfoAction } from "../../store/actions/SettingAction";
import { withRouter } from "react-router-dom";
class SetAvatar extends Component {
  state = {
    message: {},
    logo: "",
  };
  //1.上传头像
  handleUploadLogo = async (e) => {
    let reader = await new FileReader();
    let logo = await e.target.files[0];
    reader.onloadend = async () => {
      let base = reader.result;
      let name = logo.name;
      let type = logo.type;
      await uploadLogo(base, name, type);
      await store.dispatch(getUserInfoAction());
    };
    await reader.readAsDataURL(logo);
  };
  //2.回到设置页面
  toSet = async () => {
    this.props.history.push("set");
  };

  render() {
    return (
      <div className="setAvatar">
        <div className="AvaTitle">
          <div className="titleBack" onClick={this.toSet}>
            <i className="iconfont icon-youjiankuohao"></i>
          </div>
          <div className="titlecontent">修改头像</div>
          <div className="titleBlock"></div>
        </div>
        <div className="AvaPreview">
          <div className="previewImg">
            <img src={this.props.userMessage && this.props.userMessage.data && this.props.userMessage.data.avatar ? 'http://linjiashop.microapp.store/prod-api/file/getImgStream?idFile=' + this.props.userMessage.data.avatar : "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2959704908,4047124545&fm=26&gp=0.jpg"} alt="" />
          </div>
        </div>
        <div className="AvaUpload">
          <div className="uploadBox">
            <i className="iconfont icon-xiangji"></i>
            <input type="file" accept="image/*" onChange={this.handleUploadLogo} />
          </div>
        </div>
      </div>
    );
  }
  async componentDidMount() {
    await store.dispatch(getUserInfoAction());
  }
}
const mapStateToProps = (state) => {
  return {
    userMessage: state.SettingReducer.userMessage,
  };
};

export default connect(mapStateToProps, null)(withRouter(SetAvatar));
